<template>
  <div class="detail-container auction-detail">
    <!-- 订单信息 -->
    <div class="detail-header" v-if="order_info">
      <div class="detail-header-con" :class="'status'+order_info.status">
        <div class="status">{{order_info.status_name}}</div>
        <div class="create-time">{{order_info.status==3?'交易完成时间：':'时间：'}}{{order_info.status==3?order_info.end_time:order_info.create_time}}</div>
      </div>
    </div>
    <div class="detail-con" :class="!order_info ?'mag20':''">
      <!-- 收货信息 -->
       <div class="item-block address" v-if=" order_info && order_info.status != 0 && (order_info.receiver_name ||order_info.receiver_mobile||order_info.receiver_address)">
        <div class="left"></div>
        <div class="right">
          <div class="name">{{order_info.receiver_name}} {{order_info.receiver_mobile}}</div>
          <div class="addr">{{order_info.receiver_address}}</div>
          <div class="addr" v-if="order_info.id_card">(身份证号：{{order_info.id_card}})</div>
        </div>
      </div>
      <!-- 地址管理 -->
      <div class="item-block address" v-if="!order_info || order_info.status == 0 " @click="handleClickOpenAddress">
        <div class="left"></div>
        <div class="right" v-if="address">
          <div class="name">{{address.name}} {{address.mobile}}</div>
          <div class="addr">{{address.province}}{{address.city}}{{address.area}}{{address.address}}</div>
          <div class="addr" v-if="address.id_card">(身份证号：{{address.id_card}})</div>
          <div class="addr" v-if="address.email">(邮箱地址：{{address.email}})</div>
        </div>
        <div class="right" v-else>请填写收货地址</div>
        <i class="icon_right"></i>
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="item-block order-goods">
      <ul>
        <li class="goods-li"
              @click="openLink(detail.link)">
          <section class="order-goods-img">
            <a >
              <img :src="detail.pic_url+'160x160'" width="80" height="80" v-if="detail.is_compress==1"/>
              <img :src="detail.pic_url" width="80" height="80" v-else/>
            </a>
          </section>
          <section class="order-goods-infor g-flex">
            <div class="left">
              <a href="javascript:;" class="goods-title">{{detail.item_title}}</a>
              <p class="price fl" v-html="scaleGoodsPriceFn(detail.payment)"></p>
              <p class="freight">运费：<span>{{detail.post_fee}}</span></p>
            </div>
          </section>
        </li>
      </ul>
    </div>
   
    <!-- 快递信息 -->
    <div class="item-block item-block2" v-if="order_info && (order_info.status==2||order_info.status==3) &&order_info.express_no">
      <div class="title">快递信息</div>
      <div class="line-con">
        <div class="label">快递名称</div>
        <div class="line-detail" v-if="order_info.express==10">{{order_info.express_name}}</div>
        <div class="line-detail" v-else>{{order_info.express}}</div>
      </div>
      <div class="line-con">
        <div class="label">快递单号</div>
        <div class="line-detail">{{order_info.express_no}}</div>
      </div>  
    </div>
  
    <!-- 订单付款 -->
   <section class="item-block" v-if="!order_info || order_info.status == 0">
      <div class="title">请选择支付方式</div>
      <payment ref="payments"
        :isHdfkPay='false'
        :isXxPay='false'
        :isPM="false"
        :isYuePay="true"
        @globalAlipay="globalAlipay"
        v-model="paymentWay"></payment>
    </section>
    <!-- 按钮 -->
    <div class="btn" v-if="!order_info || order_info.status == 0">
      <span class="red-gra-btn" @click="ClickOrder">提交订单</span>
    </div>
    <address-dialog :visible.sync="addressVisible" @selectAddress="selectAddress"></address-dialog>
  </div>
</template>

<script>
import { getPayAuction, addAuctionOrder } from '@/api/activity/activityApi'
import { scaleGoodsPrice } from '@/utils/index.js'
import Payment from '@/components/Payment'
import addressDialog from '@/components/addressDialog'
import { openPage } from '@/utils/utils'
import Vue from 'vue'
export default Vue.extend({
  components: {
    Payment,
    addressDialog
  },
  data() {
    return {
      paymentWay: 'wxpay',
      id: '',
      order_info: {},
      detail: {},
      address: null,
      addressVisible: false
    }
  },
  methods: {
    selectAddress(data) {
      this.address = data
    },
    // 打开地址弹窗
    handleClickOpenAddress() {
      this.addressVisible = true
    },
    ClickOrder() {
      if (!this.address) {
        this.$Error('请选择地址！')
        return false
      }
      const query = this.$route.query
      const yue = this.$refs['payments'].getYueDataWrap()
      const submitData = {
        auction_turn_id: query.id,
        pay_address_id: this.address.address_id
      }
      if (this.paymentWay == 'wxpay') {
        submitData.pay_type = 2
        yue.checkPayment && (submitData.money_type = 2)
      } else if (this.paymentWay == 'alipay') {
        submitData.pay_type = 1
        yue.checkPayment && (submitData.money_type = 2)
      } else if (this.paymentWay == 'ylpay') {
        submitData.pay_type = 8
        yue.checkPayment && (submitData.money_type = 2)
      } else if (yue.checkPayment) {
        submitData.pay_type = 0
        submitData.money_type = ''
      }
      this.$loadingWrap.show()
      addAuctionOrder(submitData).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const url=res.data.url
          // 微信支付
          if(submitData.pay_type == 2){
            if (res.data.jsApiParameters) {
              const payData = JSON.parse(res.data.jsApiParameters)
              wx.requestPayment({
                timeStamp: payData.timeStamp,
                nonceStr: payData.nonceStr, //
                package: payData.package, //
                signType: payData.signType, //微信签名方式
                paySign: payData.paySign, //微信签名
                success: (res) => {
                  // console.log(res)
                  this.$Error('付款成功')
                  openPage(url)
                },
                fail: (failmsg) => {
                  // console.log(failmsg)
                }
              })
            }
          }else{
            this.$Error('付款成功')
            openPage(url)
          }
        } else {
          this.$Error(res.mag)
        }
      })
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    globalAlipay(val) {
      this.global_alipay_currency = val
    },
    Jump(url,data){
      this.$JumpPath(this,url,data)
    },
    //小程序跳转
    openLink(link){
      openPage(link)
    },
    init() {
      const data = {
        id: this.id
      }
      this.$loadingWrap.show()
      getPayAuction(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.detail = res.data.detail
          this.order_info = res.data.order_info
          if (res.data.address.length > 0) {
            this.address = res.data.address[0]
          }
          if (!res.data.order_info) {
            this.$nextTick( () => {
              this.$refs['payments'].onSetBalance(res.data.balance, {
                deposit: Number(this.detail.payment) + (Number(this.detail.post_fee) || 0)
              })
            })
          }
        } else {
          this.$Error(res.mag)
        }
      })
    }
  },
  created() {
    this.id = this.$route.query.id
    this.init()
  }
})
</script>

<style lang="scss">
@import "../../../../styles/mixin";
@import "src/styles/order/detail";
.auction-detail .order-goods .price{
  bottom: 50px;
}
.freight{
  position: absolute;
  bottom: 0;
  font-size: 24px;
  color: #666666;
}
.btn{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 11px 30px;
  z-index: 99;
  background: #fff;
  span{
    display: block;
    line-height: 76px;
    text-align: center;
    border-radius: 76px;
    text-align: center;
    font-size: 32px;
    color: #fff;
  }
}
.mag20{
  margin-top: 20px !important;
}
</style>